<template>
	<uni-unify-window v-if="isShow">
		<view slot="show" class="box-view unify-margin">
			<!-- 标题 -->
			<view class="box-title unify-flex unify-weight">
				选择餐具数量
				
				<view class="iconfont el-icon-shanchu1" @tap="cancel"></view>
			</view>
			
			<!-- 选项 -->
			<view class="option-list unify-flex">
				<view class="option-item unify-flex" :class="[isIndex === item.id? 'option-item-active bk-' + themeColor.name: '']" v-for="(item,index) in optionMenu.from[1].optionMenu" :key="index" @tap="tapChoose(item.id)">
					<view class="iconfont icon-left el-icon-jian" :style="{'opacity': item.name <= 7? .2: ''}" v-if="item.id === 7" @tap="tapNumber(1, item)"></view>
					<view :class="{'option-item-name': item.id === 7}">{{item.name + (item.unit || '')}}</view>
					<view class="iconfont icon-right el-icon-a-tianjiajiahao" :style="{'opacity': item.name >= 15? .2: ''}" v-if="item.id === 7" @tap="tapNumber(2, item)"></view>
				</view>
			</view>
			
			<!-- 底部按钮 -->
			<uni-base-unify-btn :color="btnTitle? '#333333': ''" :isWeight="true" :title="!btnTitle? '选择餐具': btnTitle" :backgroundColor="!btnTitle? '#999999': 'linear-gradient(to right, #f7d66e, #f8a756)'" borderColor="#FFFFFF" borderRadius="20rpx" @click="affirm"></uni-base-unify-btn>
		</view>
	</uni-unify-window>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			optionMenu:{
				type:Array,
				default: null
			}
		},
		data() {
			return {
				
				// isIndex: this.$mConstDataConfig.affirmOrderMenu.from2[1].optionMenu[0].id,	// 当前选择  默认数组第一个id
				// btnTitle: this.$mConstDataConfig.affirmOrderMenu.from2[1].optionMenu[0].name,	// 动态设置按钮title  默认第一个name
				isShow: false
			}
		},
		computed:{
			// getOpt(){
			// 	return this.optionMenu || this.$mConstDataConfig.affirmOrderMenu.from2[1].optionMenu;
			// }
		},
		methods: {
			// 是否显示
			updateShow() {
				this.isShow = this.show;
			},
			
			// 选择
			tapChoose(e) {
				console.log(this.optionMenu)
				let optionMenu = this.optionMenu, data, index;
				data = optionMenu.find(res => {
					if(e === res.id) {
						return true
					}
				})
				if(data.id !== this.isIndex) {
					this.isIndex = data.id;
					index = optionMenu.findIndex(res => {
						if(res.id === data.id) {
							return res
						}
					})
					this.btnTitle = index !== 0? ('需要' + optionMenu[index].name + optionMenu[index].unit + '餐具'): optionMenu[index].name
				}
			},
			
			// 数量加/减  status: 1减 2加	e: 对象
			tapNumber(status, e) {
				let index = this.isIndex;
				if(index === 7) {
					switch(status) {
						case 1:
							if(this.optionMenu[index].name > 7) {
								this.optionMenu[index].name--
							}
							break
						case 2:
							if(this.optionMenu[index].name < 15) {
								this.optionMenu[index].name++
							}
							break
						default:
							break
					}
					this.btnTitle = '需要' + this.optionMenu[index].name + this.optionMenu[index].unit + '餐具';
				}
			},
			
			// 确认
			affirm() {
				let index = this.isIndex;
				this.$mConstDataConfig.affirmOrderMenu.from2[1].value = this.optionMenu[index].name + this.optionMenu[index].unit;
				this.cancel()
			},
			
			// 关闭
			cancel() {
				this.isShow = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 标题
	.box-title {
		align-items: center;
		justify-content: space-between;
		height: 96rpx;
	}
	
	.el-icon-shanchu1 {
		padding: 30rpx 0 30rpx 30rpx;
	}
	
	// 选项
	.option-list {
		align-items: center;
		flex-wrap: wrap;
		margin-top: -30rpx;
	}
	
	.option-item {
		align-items: center;
		border: 1rpx solid rgba($color: #000000, $alpha: .1);
		font-size: $uni-font-size-base;
		padding: 10rpx 30rpx;
		border-radius: 10rpx;
		margin: 30rpx 30rpx 0 0;
	}
	
	.option-item-active {
		background: rgba($color: #f7d66e, $alpha: .1);
	}
	
	.option-item:nth-child(4n) {
		margin-right: 0;
	}
	
	.iconfont {
		font-size: $uni-font-size-lg;
		color: #000000;
	}
	
	.option-item-name {
		width: 75rpx;
		text-align: center;
	}
	
	.icon-left {
		padding-right: 30rpx;
	}
	
	.icon-right {
		padding-left: 30rpx;
	}
</style>